/**
 * @author chenmin
 * @class  弹出面板 -router
 */

'use strict';

var React = require('react');
var PanelRouterStore = require('./stores/panelRouterStores');
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var config = require('./config');


var PanelRouterComponent = React.createClass({
      getInitialState:function(){
            return {
                  isOpen:false,
                  handler:null,
                  params:null,
                  title:''
            };
      },
      componentDidMount : function(){
            PanelRouterStore.addChangeListener(this.hanlderChange);
      },
      componentWillUnmount : function(){
            PanelRouterStore.removeChangeListener(this.hanlderChange);
      },
      hanlderChange:function(panelView){
            var obj = config[panelView.eventName];
            this.setState({
                  isOpen:true,
                  handler:obj.handler,
                  title:obj.title,
                  params:panelView.params
            });
      },
      hanlderClose:function(){
            this.setState({isOpen:false});
      },
      render: function() {
            var self = this;

            //  reactElements
            var Elm = this.state.handler;

            /* jshint ignore:start */
            
            var el =this.state.isOpen?<div>
                                                                  <div className="app-warpper-mark"></div>
                                                                        <div className="do-panel-view">
                                                                              <div className="do-panel-view-header">
                                                                                    <h3 className="do-panel-view-title">{this.state.title}</h3>
                                                                                    <a href="javascript:;" className="do-panel-view-close" onClick={self.hanlderClose} ></a>
                                                                              </div>
                                                                              <div className="do-panel-view-body">
                                                                                    <Elm  cartTitle={this.state.params.cartTitle} inputTitle={this.state.params.inputTitle}/>
                                                                              </div>
                                                                        </div>
                                                                  </div>:[];

            return (
                                    <ReactCSSTransitionGroup transitionName="do-fade">
                                          {el}
                                    </ReactCSSTransitionGroup>
                  );
            /* jshint ignore:end */
   }
});

/* jshint ignore:start */
React.render( <PanelRouterComponent />, document.getElementById('mark'));
/* jshint ignore:end */

module.exports = PanelRouterComponent;
